<template>
    <div class="yuyuedetail">
        <div class="header">
            <div class="up">
                <span @click="go">
                    <van-icon name="arrow-left" /></span>
                <h2>课程详情</h2>
                <div></div>
            </div>
        </div>

        <!-- <div class="teacher_info">
            <div class="left">
                <img class="otoimg" :src="teacher.avatar">
                <div class="text">
                    <p>{{teacher.teacher_name}}名字</p>
                    <p>{{teacher.sex == 1 ? '女':'男'}} {{teacher.teach_age}}年教龄</p>
                </div>
            </div>
            <div class="right">
                查看详情
            </div>
        </div> -->

        <div class="teacher_info" v-for="(item,index) in teacher" :key=item.id>
            <div class="left">
                <img class="otoimg" :src="item.avatar">
                <div class="text">
                    <p>{{item.real_name}}名字</p>
                    <p>{{teacher.sex == 1 ? '女':'男'}}{{item.id}}年教龄</p>
                </div>
            </div>
            <div class="right">
                查看详情
            </div>
        </div>
        <div class="op-title">
           | 选择时间
            <span class="sp">（北京时间）</span>
        </div>





    </div>
</template>

<script>
    import { Icon } from 'vant';
    import { yuyuedetail } from "../api/index";
    export default {
        name: 'Yuyuedetail',
        components: {
            [Icon.name]: Icon
        },
        data() {
            return {
                teacher_id: this.$route.query.id,
                teacher: {},
            }
        },
        mounted() {
            this.yuyuelessondetail()
        },
        methods: {
            async  yuyuelessondetail() {
                const res = await yuyuedetail(this.$route.query.ID)
                console.log(res.data)
                this.teacher = res.data.data
                console.log(this.teacher)
            },
            go() {
                window.history.go(-1)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .yuyuedetail {
        background: #eee;
        height: 600px;
    }

    .header {
        position: relative;
        width: 414px;
        height: 110px;
        background: #589af0;
        font-size: 16px;
        color: white;
        /* overflow: hidden; */
    }

    .up {
        width: 400px;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;
    }

    .teacher_info {
        position: absolute;
        width: 95%;
        height: 80px;
        margin: 10px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        top: 45px;
        border-radius: 5px;
    }

    .otoimg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 20px;
    }

    .left {
        width: 180px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .text {
        width: 100px;
        height: 80px;
    }

    p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 20px;
    }

    .right {
        background: #eee;
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        text-align: center;
        color: red;
    }

    .op-title {
        font-size:16px;
        font-weight: 400;
        color: rgba(89, 89, 89, 1);
        line-height: 100px;
        position: relative;
        padding-left:20px;
        height: 100px;

    }

    .sp {
        font-size:14px;
    }
</style>